<template>
	<view class="skus" v-if="item.id>0">
		<view class="info">
			<image :src="imsrc" class="pic" lazy-load/>
			<view class="price">
				<uv-text :text="item.store_name" size="16" color="#333" />
				<view class="sel_skus" v-if="item.spec_type>0">
					<text class="lbl_sel">已选</text>
					<text class="skus_name">{{skusName}}</text>
				</view>	
				<view class="flex">
					<text class="price_icon">¥</text>
					<text class="price_int">{{price[0]}}</text>
					<text class="price_float">.{{price[1]}}</text>
				</view>
			</view>
		</view>
		<view class="choice">
			<view v-for="(e, i) in skus.specs" :key="e.id">
				<text class="subname">{{e.name}}</text>
				<view class="tags_row">
					<uv-tags shape="circle" v-for="(a, j) in e.values" :key="a.id" :text="a.value"
						size="medium" color="#333" @click="skusSelect(i, j, a.id, a.value, a.image)"
						:bgColor="isSelect(a.id) ? '#F9EDEB' : '#F2F2F2'"
						:borderColor="isSelect(a.id) ? '#DE3F27' : '#F2F2F2'" />
				</view>
			</view>
		</view>
		<view class="num">
			<uv-text text="数量" color="#333" size="14px" bold />
			<uv-number-box v-model="select.num" @change="e => select.num = e.value" button-size="18" />
		</view>
		<view class="flex">
			<button class="btn_sure" type="button" @click="confirm">确定</button>
			<!-- <button class="btn_cart" type="button" v-if="!name">加入购物车</button>
			<button class="btn_sure" type="button" v-if="!name">立即购买</button> -->
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		computed,
		watch,
		onMounted
	} from 'vue'

	const props = defineProps({
		name: {
			type: String,
			default: ''
		},
		skus: {
			type: [Object, Array],
			default: () => ({
				skus: [],
				specs: []
			})
		},
		item: {
			type: Object,
			default: () => ({})
		},
		initSkus: {
			type: [Object, String],
			default: ''
		}
	})
	const emit = defineEmits(['select'])
	const select = reactive({
		num: 1,
		sku: []
	})
	const init = () => {
		if (!props.skus?.specs?.length) {
		    select.sku = [] // 如果没有规格，也要初始化
		    return
		}
		const specs = props.skus.specs
		select.sku = specs.map((e, i) => ({
			i,
			j: 0,
			id: e.id,
			vid: e.values[0].id || '',
			name: e.values[0].value || '',
			image: e.values[0].image || ''
		}))
		if (!props.initSkus) return
		select.num = props.initSkus.num
		select.sku = props.initSkus.sku
	}
	const imsrc = computed(() => {
		if (!props.skus?.specs?.length) return props.item.image
		const spec_ids = select.sku.map(e => e.vid).join(':')
		const item = props.skus.skus.find(e => e.spec_ids === spec_ids)
		return item.image ? item.image : props.item.image
	})
	const skusName = computed(() => {
		if (!props.skus?.specs?.length) return props.item.store_name
		const spec_ids = select.sku.map(e => e.vid).join(':')
		const item = props.skus.skus.find(e => e.spec_ids === spec_ids)
		return item.spec_values.map(e => e).join('-')
	})
	const price = computed(() => {
		if (!props.skus?.specs?.length) {
			const price = props.item.price.toString().split('.')
			return price
		}
		const spec_ids = select.sku.map(e => e.vid).join(':')
		const item = props.skus.skus.find(e => e.spec_ids === spec_ids)
		const price = item.price.toString().split('.')
		return price
	})

	const isSelect = (id) => {
		return select.sku.some(e => e.vid === id)
	}

	const skusSelect = (i, j, id, name, image) => {
		select.sku[i].j = j
		select.sku[i].vid = id
		select.sku[i].name = name
		select.sku[i].image = image
	}

	const confirm = () => {
		if (!props.skus?.specs?.length) {
			emit('select', {
				num: select.num,
				item: null,
				sku: null
			})
			return
		}
		const spec_ids = select.sku.map(e => e.vid).join(':')
		const item = props.skus.skus.find(e => e.spec_ids === spec_ids)
		emit('select', {
			num: select.num,
			item,
			sku: select.sku
		})
	}
	onMounted(() => {
	  init() // 确保组件挂载后再初始化
	})
	watch(() => props.skus,(newVal) => {
			if (newVal.skus?.length > 0 || newVal.specs?.length > 0) {
				init() // 确保数据有效后再初始化
			}
		}, {
			immediate: true
		} // 立即监听，防止初始数据未触发
	)
</script>
<style lang="scss" scoped>
	.skus {
		padding: 30upx 40upx;
		padding-bottom: 16upx;
	}
    .pic {
		width: 200upx;
		height: 200upx;
		border-radius: 10upx;
	}
	
	.info {
		display: flex;
		margin-top: 30upx;
		align-items: center;

		.price {
			margin-left: 20upx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			height: 100px;
			.sel_skus {
				display: flex;
				height: 72upx;
				line-height: 72upx;
				.lbl_sel {
					color:#8c8c8c;
					font-size: 24upx;
					margin-right: 20upx;
				}
				.skus_name {
					color:#333;
					font-size: 24upx;
				}
			}
			.price_icon {
				color: #DE3F27;
				font-size: 32upx;
				margin-right: 10upx;
				display: flex;
				align-items: flex-end;
			}
			.price_int {
				color: #DE3F27;
				font-size: 52upx;
				display: flex;
				align-items: flex-end;
			}
			.price_float {
				color: #DE3F27;
				font-size: 32upx;
				display: flex;
				align-items: flex-end;
			}
		}

		/* 小程序不支持 > :last-child，改成显式元素 */
		.price>view:last-child,
		.price>text:last-child {
			margin-top: auto;
		}
	}

	.choice {
		margin: 50upx 0;
		.subname {
			font-size: 28upx;
			color: #333;
			margin-bottom: 20upx;
			display: block;
		}
		.tags_row {
			display: flex;
			flex-wrap: wrap;
			gap: 20upx;
			margin-bottom: 20upx;
		}
	}

	.num {
		display: flex;
		align-items: center;
		margin-bottom: 50upx;
		justify-content: space-between;
	}
	.btn_sure {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		background-color: #DE3F27;
		color: #fff;
		font-size: 28upx;
		margin-top: 30upx;
	}
	.btn_cart {
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
		height: 80upx;
		line-height: 80upx;
		border-radius: 40upx;
		color: #fff;
		font-size: 28upx;
		margin-top: 30upx;
		background-color: #F6CA47;
	}
</style>